<!--终端管理-->

<!DOCTYPE html>
<html>

<head>
    <%- include ../taglib/layout-table.ejs %>

</head>

<body class="gray-bg">
<div class="wrapper wrapper-content animated fadeInRight">
    <div class="row">
        <div class="col-sm-12">
            <div class="ibox float-e-margins">
                <div class="ibox-title">
                    <h5>查询条件</h5>
                    <div class="ibox-tools">
                        <a class="collapse-link">
                            <i class="fa fa-chevron-up"></i>
                        </a>
                    </div>
                </div>
                <div class="ibox-content">
                    <form role="form" class="form-inline">
                        <div class="form-group">
                            <label class="control-label">时间范围：</label>
                            <!--<input type="email" placeholder="请输入用户名" id="exampleInputEmail2" class="form-control">-->
                        </div>
                        <div class="form-group">
                            <input placeholder="开始时间" class="laydate-icon form-control layer-date" id="start">
                            <!--<input type="email" placeholder="请输入用户名" id="exampleInputEmail2" class="form-control">-->
                        </div>
                        <div class="form-group">
                            <input placeholder="结束时间" class="laydate-icon form-control layer-date" id="end">

                            <!--<input type="password" placeholder="请输入密码" id="exampleInputPassword2" class="form-control">-->
                        </div>
                        <div class="input-group div-serch-input">
                            <input type="text" placeholder="请录入编码名称" class="input form-control">
                            <span class="input-group-btn">
                            <button type="button" class="btn btn btn-primary" onclick="query()"> <i
                                        class="fa fa-search"></i> 搜索</button>
                        </span>
                        </div>
                        <!--<button class="btn btn-white" type="button" onclick="query()"><i class="fa fa-search"></i> 查询</button>-->
                    </form>


                </div>
            </div>
        </div>
    </div>
    <div class="row">
        <div class="col-sm-12">
            <div class="ibox float-e-margins">
                <div class="ibox-title">
                    <h5>数据列表</h5>
                    <div class="ibox-tools">

                        <!--<a class="collapse-link">-->
                        <!--<i class="fa fa-chevron-up"></i>-->
                        <!--</a>-->

                    </div>
                </div>
                <div class="ibox-content">
                    <div class="" id="">
                        <!--<button id="go_search" class="btn btn-default">搜索1</button>-->
                        <button class="btn btn-primary " type="button"><i class="fa fa-check"></i>&nbsp;新增</button>
                        <button class="btn btn-primary " type="button"><i class="fa fa-check"></i> 其他操作</button>
                        <!--data-target="#myModal"-->
                        <button type="button" class="btn btn-primary" data-toggle="modal" onclick="add()">
                            打开示例窗口
                        </button>
                    </div>
                    <div>
                        <table id="example" class="table table-striped table-bordered table-hover dataTables-example">
                            <thead>
                            <tr>
                                <th>
                                    <!--<input type="checkbox" class="checkall" />-->
                                </th>
                                <th>部门名称</th>
                                <th>设备号码</th>
                                <th>创建人</th>
                                <th>时间</th>
                                <th width="200px">操作</th>
                            </tr>
                            </thead>
                            <tbody></tbody>

                            <!--<tfoot>-->
                            <!--<tr>-->
                            <!--<th>-->
                            <!--&lt;!&ndash;<input type="checkbox" class="checkall" />&ndash;&gt;-->
                            <!--</th>-->
                            <!--<th>部门名称</th>-->
                            <!--<th>设备号码</th>-->
                            <!--<th>创建人</th>-->
                            <!--<th>时间</th>-->
                            <!--<th>部门id</th>-->

                            <!--</tr>-->
                            <!--</tfoot>-->
                            <!--<thead>-->
                            <!--<tr>-->
                            <!--<th>Name</th>-->
                            <!--<th>Position</th>-->
                            <!--<th>Office</th>-->
                            <!--<th>Extn.</th>-->
                            <!--<th>Start date</th>-->
                            <!--<th>Salary</th>-->
                            <!--</tr>-->
                            <!--</thead>-->
                        </table>

                    </div>
                    <div class="modal inmodal" id="myModal" tabindex="-1" role="dialog" data-width="500px"
                         data-height="400px" aria-hidden="true">
                        <div class="modal-dialog">
                            <div class="modal-content animated bounceInRight">
                                <div class="modal-header">
                                    <button type="button" class="close" data-dismiss="modal">
                                        <span aria-hidden="true">&times;</span><span class="sr-only">关闭</span>
                                    </button>
                                    <!--<i class="fa fa-laptop modal-icon"></i>-->
                                    <h4 class="modal-title">新增设备</h4>
                                </div>
                                <div class="modal-body" style="max-height: 400px; ">
                                    <form class="form-horizontal m-t" id="editForm" method="get">
                                        <div class="form-group">
                                            <label class="col-sm-3 control-label">姓氏：</label>
                                            <div class="col-sm-8">
                                                <input id="firstname" name="firstname" class="form-control"
                                                       type="text">
                                                <span class="help-block m-b-none"><i class="fa fa-info-circle"></i> 这里写点提示的内容</span>
                                            </div>
                                        </div>
                                        <div class="form-group">
                                            <label class="col-sm-3 control-label">名字：</label>
                                            <div class="col-sm-8">
                                                <input id="lastname" name="lastname" class="form-control"
                                                       type="text" aria-required="true" aria-invalid="false"
                                                       class="valid">
                                            </div>
                                        </div>
                                        <div class="form-group">
                                            <label class="col-sm-3 control-label">用户名：</label>
                                            <div class="col-sm-8">
                                                <input id="username" name="username" class="form-control"
                                                       type="text" aria-required="true" aria-invalid="true"
                                                       class="error">
                                            </div>
                                        </div>
                                        <div class="form-group">
                                            <label class="col-sm-3 control-label">密码：</label>
                                            <div class="col-sm-8">
                                                <input id="password" name="password" class="form-control"
                                                       type="password">
                                            </div>
                                        </div>
                                        <div class="form-group">
                                            <label class="col-sm-3 control-label">确认密码：</label>
                                            <div class="col-sm-8">
                                                <input id="confirm_password" name="confirm_password"
                                                       class="form-control" type="password">
                                                <span class="help-block m-b-none"><i class="fa fa-info-circle"></i> 请再次输入您的密码</span>
                                            </div>
                                        </div>
                                        <div class="form-group">
                                            <label class="col-sm-3 control-label">E-mail：</label>
                                            <div class="col-sm-8">
                                                <input id="email" name="email" class="form-control" type="email">
                                            </div>
                                        </div>
                                        <!--<div class="form-group">-->
                                        <!--<label class="col-sm-3 control-label">下拉列表：</label>-->
                                        <!--<div class="col-sm-8">-->
                                        <!--<div class="input-group">-->
                                        <!--<input type="text" name="testcombo"  class="form-control" id="testcombo">-->
                                        <!--<div class="input-group-btn">-->
                                        <!--<button type="button" class="btn btn-white dropdown-toggle" data-toggle="dropdown">-->
                                        <!--<span class="caret"></span>-->
                                        <!--</button>-->
                                        <!--<ul class="dropdown-menu dropdown-menu-right" role="menu">-->
                                        <!--</ul>-->
                                        <!--</div>-->
                                        <!--&lt;!&ndash; /btn-group &ndash;&gt;-->
                                        <!--</div>-->
                                        <!--</div>-->
                                        <!--</div>-->

                                        <div class="form-group">
                                            <div class="col-sm-8 col-sm-offset-3">
                                                <div class="checkbox">
                                                    <label>
                                                        <input type="checkbox" class="checkbox" id="agree"
                                                               name="agree"> 我已经认真阅读并同意《使用协议》
                                                    </label>
                                                </div>
                                            </div>
                                        </div>
                                    </form>
                                </div>
                                <div class="modal-footer">
                                    <button type="button" class="btn btn-white" data-dismiss="modal">关闭</button>
                                    <button type="button" class="btn btn-primary" onclick="save()">保存</button>
                                </div>
                            </div>
                        </div>
                    </div>

                </div>
            </div>
        </div>
    </div>

</div>


<%- include ../taglib/layout-content.ejs %>

<script type="text/javascript">

    var table;
    $(document).ready(function () {
        debugger;
//        table= $('.dataTables-example').dataTable({
        table = $('#example').dataTable({

            "lengthChange": false,//是否允许用户自定义显示数量
            "searching": false,//本地搜索
//            "scrollY": "220px",//dt高度
//            "autoWidth": true,//自动宽度
            //        "dom": '<"top"f<"clear">>rt<"bottom"ilp<"clear">>',
//            "lengthChange": false,//是否允许用户自定义显示数量
            "ajax": {
                "url": "/terminal/list",
                "dataSrc": "data"

            },
            serverSide: true,
            columns: [
                {
                    "sClass": "text-center",
                    "data": "id",
                    'checkboxes': {
                        'selectRow': true,
                    },

                },
                {"sClass": "text-center", data: 'code'},
                {"sClass": "text-center", data: 'name'},
                {"sClass": "text-center", data: 'mnemonic'},
                {"sClass": "text-center", data: 'memo'},
//            { data: 'deptId' },
                {
                    "bSortable": false,
                    "orderable": false,
                    "sClass": "text-center",
                    data: function (e) {//这里给最后一列返回一个操作列表
                        //e是得到的json数组中的一个item ，可以用于控制标签的属性。
                        return '' +
                            '<button class="btn btn-info btn-sm" type="button" onclick="edit()" data-toggle="modal"   ><i class="fa fa-paste"></i> <span class="bold">编辑</span>' +
                            '<button class="btn btn-warning btn-sm" type="button"><i class="fa fa-warning"></i> <span class="bold">删除</span>';

                    }
                },
//            {
//                data: function (e) {//这里给最后一列返回一个操作列表
//                    //e是得到的json数组中的一个item ，可以用于控制标签的属性。
//                    return '<p><button class="btn btn-large btn-primary" type="button">Large button</button>' +
//                        '<button class="btn btn-large" type="button">Large button</button> </p>';
//                }
//            }
            ],
//            'order': [[0, 'asc']],
//        initComplete: function (setting, json) {
//            //初始化完成之后替换原先的搜索框。
//            //本来想把form标签放到hidden_filter 里面，因为事件绑定的缘故，还是拿出来。
//            $("#example_filter input[type=search]")
////            debugger;
//            $("#example_filter").html("<form id='filter_form'>" + $("#hidden_filter").html() + "</form>");
//        },
        });

//    选中行数据
        $('#button').click(function () {
            alert(table.DataTable().rows('.selected').data().length + ' row(s) selected');
        });
        $(document).on("click", "#go_search", function () {
            debugger;
            $("#example").DataTable().search('', false, false).draw();
//        $("#example").DataTable().draw();//点搜索重新绘制table。
        });
        $(document).on("click", ".show-detail-json", function () {//取出当前行的数据
            debugger;
            alert(JSON.stringify($("#table_server").DataTable().row($(this).parents("tr")).data()));
        });
        //验证
        var cusrules = {
            rules: {
                firstname: {
                    required: true,
                    isMobile: true
                },
//                lastname: "required",
                username: {
                    required: true,
                    minlength: 2,
                    maxlength: 5
                },
                password: {
                    required: true,
                    minlength: 5
                },
//                confirm_password: {
//                    required: true,
//                    minlength: 5,
//                    equalTo: "#password"
//                },
//                email: {
//                    required: true,
//                    email: true
//                },
//                testcombo: {
//                    required: true
//                },
//                topic: {
//                    required: "#newsletter:checked",
//                    minlength: 2
//                },
//                agree: "required"
            },
            messages: {
//                firstname: icon + "请输入你的姓",
//                lastname: icon + "请输入您的名字",
                username: {
                    required: icon + "请输入您的用户名",
                    minlength: icon + "用户名必须两个字符以上",
                    maxlength: icon + "用户名必须五个字符以下"
                },
                password: {
                    required: icon + "请输入您的密码",
                    minlength: icon + "密码必须5个字符以上"
                },
//                testcombo: {
//                    required: icon + "请选择..",
////                    minlength: icon + "密码必须5个字符以上"
//                },
//                confirm_password: {
//                    required: icon + "请再次输入密码",
//                    minlength: icon + "密码必须5个字符以上",
//                    equalTo: icon + "两次输入的密码不一致"
//                },
//                email: icon + "请输入您的E-mail",
//                agree: {
//                    required: icon + "必须同意协议后才能注册",
//                    element: '#agree-error'
//                }
            }
        };
        $("#editForm").validate(cusrules);
        //日期范围限制
        var start = {
            elem: '#start',
            format: 'YYYY-MM-DD hh:mm:ss',
            min: laydate.now(), //设定最小日期为当前日期
            max: '2999-06-16 23:59:59', //最大日期
//            start: laydate.now(),
//            start: laydate.now() + ' 00:00:00',
            istime: true,
            istoday: false,
            festival: true, //是否显示节日
            choose: function (datas) {
                end.min = datas; //开始日选好后，重置结束日的最小日期
                end.start = datas //将结束日的初始值设定为开始日
            }
//            min: laydate.now(-1), //-1代表昨天，-2代表前天，以此类推
//            max: laydate.now(+1) //+1代表明天，+2代表后天，以此类推
        };
        var end = {
            elem: '#end',
            format: 'YYYY-MM-DD hh:mm:ss',
//            min: laydate.now(),
            max: '2999-06-16 23:59:59',
//            start: laydate.now() + ' 23:59:59',
            istime: true,
            istoday: false,
            festival: true, //是否显示节日
            choose: function (datas) {
                start.max = datas; //结束日选好后，重置开始日的最大日期
            }
        };
        laydate(start);
        laydate(end);
        $("#start").val(laydate.now() + ' 00:00:00');
        $("#end").val(laydate.now() + ' 23:59:59');
//        下拉列表

        var testBsSuggest = $("#test").bsSuggest({
            indexId: 2, //data.value 的第几个数据，作为input输入框的内容
            indexKey: 1, //data.value 的第几个数据，作为input输入框的内容
            data: {
                'value': [
                    {
                        'id': '0',
                        'word': 'lzw',
                        'description': 'http://lzw.me'
                    },
                    {
                        'id': '1',
                        'word': 'lzwme',
                        'description': 'http://w.lzw.me'
                    },
                    {
                        'id': '2',
                        'word': 'meizu',
                        'description': 'http://www.meizu.com'
                    },
                    {
                        'id': '3',
                        'word': 'flyme',
                        'description': 'http://flyme.meizu.com'
                    }
                ],
                'defaults': 'http://lzw.me'
            }
        });
    });
    function add() {
        $("#myModal").modal("show");
    }
    function edit() {
        debugger;
        var s_date = table.DataTable().rows('.selected').data();
        if (s_date.length < 1) {
            swal({
                title: "系统提示",
                text: "请选择一条数据编辑",
                type: "warning"
            });
        } else {

        }

    }
    function del() {
        swal({
                title: "您确定要删除这条信息吗",
                text: "删除后将无法恢复，请谨慎操作！",
                type: "warning",
                showCancelButton: true,
                confirmButtonColor: "#DD6B55",
                confirmButtonText: "是的，我要删除！",
                cancelButtonText: "让我再考虑一下…",
                closeOnConfirm: false,
                closeOnCancel: false
            },
            function (isConfirm) {
                if (isConfirm) {
                    swal("删除成功！", "您已经永久删除了这条信息。", "success");
                } else {
                    swal("已取消", "您取消了删除操作！", "error");
                }
            });
    }
    function query() {
        $("#example").DataTable().search('', false, false).draw();
    }
    function save() {
        debugger;
//        $.ajax({
//            cache: true,
//        type:"post",
        //            url:'/terminal/save',
//            data:$('#editForm').serialize(),// 你的formid
////            async: false,
//            error: function(request) {
//                debugger;
//                alert("Connection error");
//            },
//            success: function(data) {
//                debugger;
////                $("#commonLayout_appcreshi").parent().html(data);
//            }
//        });
        $('#editForm').ajaxSubmit({

            type: 'post', // 提交方式 get/post
            dataType: 'json',
            url: '/terminal/save', // 需要提交的 url
            beforeSubmit: function (formData, jqForm, options) {
                debugger;
                if (!$("#editForm").valid()) {
                    return false;
                }
            },
            success: function (data) { // data 保存提交后返回的数据，一般为 json 数据
                // 此处可对 data 作相关处理
                swal({
                    title: "系统提示",
                    text: "保存成功",
                    type: "success"
                });
                $(this).resetForm();
            },

        });
    }
    //    //验证，也可以单独写js
    //    $().ready(function () {
    //
    //
    //    });
</script>


</body>

</html>
